<!--  -->
<template>
  <div class="main">
    <div class="input">
      <input type="text" placeholder="用户地址" v-model="mid" />
      <br />
      <input type="text" placeholder="视频地址" v-model="videoUrl" />
      <br />
      <input type="text" placeholder="直播地址" v-model="uid" />
      <br />
    </div>
    <div class="button">
      <div class="refresh" @click="refresh">重置</div>
      <div class="submit" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import store from "../../../store/index";
import emitter from "../../../utill/emitter";
export default {
  data() {
    return {
      videoUrl: "",
      mid: "",
      uid: "",
    };
  },
  methods: {
    refresh() {
      this.videoUrl = ''
      this.mid = ''
      this.uid = ''
    },
    submit() {
      if (this.uid !== "") {
        let myURL = new URL(this.uid);
        store.dispatch("uid", myURL.pathname.slice(1));
        window.localStorage.setItem('uid',myURL.pathname.slice(1))
        this.$Toast.success(`直播地址更新`);
      }
      if (this.videoUrl !== "") {
        let myURL = new URL(this.videoUrl);
        store.dispatch("videoUrl", myURL.pathname.slice(7));
        window.localStorage.setItem('videoUrl',myURL.pathname.slice(7))
        this.$Toast.success(`视频数据更新`);
      }
      if (this.mid !== "") {
        let myURL = new URL(this.mid);
        store.dispatch("mid", myURL.pathname.slice(1));
        window.localStorage.setItem('mid',myURL.pathname.slice(1))
        this.$Toast.success(`个人数据更新`);
      }
      if (this.uid === "" && this.videoUrl === "" && this.mid === "") {
         this.$Toast.warning("暂未提交任何信息");
      }
      emitter.emit("submit");
    },
  },
};
</script>
<style lang='css' scoped>
.main {
  height: 215px;
}
input {
  background-color: transparent;
  box-shadow: 0 0 0 1px rgb(133, 132, 132);
  outline: transparent;
  border: none;
  color: aliceblue;
  line-height: 30px;
  padding: 0 15px;
  margin-top: 20px;
}
input::placeholder {
  font-size: 12px;
  color: rgba(240, 248, 255, 0.568);
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button div {
  width: 50px;
  margin-top: 20px;
  margin-right: 15px;
  border: 1px solid rgba(11, 181, 233, 0.5);
  padding: 5px 0;
  border-radius: 5px;
  color: skyblue;
  cursor: pointer;
}
.button div:hover {
  background-color: skyblue;
  color: rgb(0, 0, 0);
}
</style>